<template>

	<view class="home">
		<!--轮播图-->
		<swiper indicator-dots circular autoplay="true">
			<swiper-item v-for="item in swipers" :key="item.id">
				<image class="logo" :src="item.pic"></image>
			</swiper-item>
		</swiper>

		<!-- <view class="search-container">
			<view class="" style="width: 80%;">
				<input class="search-input" type="text" @input="onKeyInput" placeholder="请输入相亲编号" />
			</view>
			<view class="" style="margin-left: 10px;"><button size="mini" @click="so">搜索</button></view>
		</view> -->


		<view class="sex" style="text-align: center;">

			<view class="sex_l" @click="tuijian()" style="width: 50%;text-align: center;">
				<text :style="{ 'color': tj_nsl, 'font-weight': tj_size }">推荐</text>
				<view class=""
					:style="{ 'width': '70%', 'height': '2px', 'margin': '0 auto', 'margin-top': '2px', 'background-color': tj_nsl }">
				</view>
			</view>

			<!-- <view class="sex_l" @click="nanshi()" style="width: 3325text-align: center;">
				<text :style="{'color':nan_hsl,'font-weight':nan_size}">男士</text>
				<view class="" :style="{'width':'70%','height': '2px','margin':'0 auto','margin-top': '2px','background-color':nan_hsl}"></view>
			</view>
			
			<view class="sex_l" @click="nvshi()" style="width: 25%;text-align: center;">
				<text :style="{'color':nv_hsl,'font-weight':nv_size}">女士</text>
				<view class="" :style="{'width':'70%','height': '2px','margin':'0 auto','margin-top': '2px','background-color':nv_hsl}"></view>
			</view> -->

			<view class="sex_l" @click="saixuan()" style="width: 50%;text-align: center;">
				<text :style="{ 'color': sai_hsl, 'font-weight': sai_size }">筛选</text>
				<view class=""
					:style="{ 'width': '70%', 'height': '2px', 'margin': '0 auto', 'margin-top': '2px', 'background-color': sai_hsl }">
				</view>
			</view>

		</view>

		<!-- 在smh-select组件中添加筛选确认按钮 -->
		<view v-if="seen">
			<smh-select :list="list" @change="onFilterChange"></smh-select>
		</view>

		<view class="tan-main-wrap">
			<view class="tan-list-box" v-for="item in products" :key="item.id">

				<view @click="() => gotourl(item.id)">

					<view class="tan-img-pic">
						<image :src="item.pic" mode="widthFix"></image>
					</view>
					<view class="tan-list-title">
						<text style="font-weight:bold;font-size: 16px;color: #000000;">{{ item.nickname }} {{ item.age
						}}岁</text>
					</view>
					<view class="tan-list-guanyu">
						<view class="iconfont icon-xiaolian"
							style="font-size: 13px;margin-top: 8px;margin-left: 5px;color: #E33586;"></view>
						<view class=""><text
								style="color: #FF4A6A;font-weight:bold;margin-left: 3px;font-size: 10px;">关于我</text>
						</view>
						<view class="iconfont icon-renzheng-"
							style="font-size: 13px;margin-top: 8px;margin-left: 5px;color: #E33586;"></view>

						<view class="">
							<text style="color: #FF4A6A;font-weight:bold;margin-left: 3px;font-size: 10px;">{{
								item.renzheng }}</text>
						</view>
					</view>
					<view class="tan-list-title">
						{{ item.about_me }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// import helper from '../../common/helper.js';  
// var jweixin = require('jweixin-module')
export default {
	data() {
		return {
			// 原有数据保持不变
			filterParams: {
				age: 0,
				height: 0,
				weight: 0,
				income: 0
			},
			originalProducts: [], // 初始化为空数组
			id: '',
			sex: '',
			wxsharetip: false,
			inputValue: "",
			nan_hsl: '',
			nv_hsl: '',
			sai_hsl: '',
			tj_nsl: '#F14399',
			nav1: true,
			tj_size: "bold",
			nan_size: "",
			nv_size: "",
			sai_size: "",
			swipers: [],
			products: [],
			sex: 0,
			seen: false,
			list: [
				{
					title: '年龄',
					data: [
						{ text: '不限', identity: 0, status: false, title: '年龄' },
						{ text: '20-25', identity: 1, status: false, title: '年龄' },
						{ text: '26-32', identity: 2, status: false, title: '年龄' },
						{ text: '33-39', identity: 3, status: false, title: '年龄' },
						{ text: '39-45', identity: 4, status: false, title: '年龄' },
						{ text: '46-55', identity: 5, status: false, title: '年龄' },
						{ text: '56-65', identity: 6, status: false, title: '年龄' },
						{ text: '66以上', identity: 7, status: false, title: '年龄' },
					]
				},
				{
					title: '身高',
					data: [
						{ text: '不限', identity: 0, status: false, title: '身高' },
						{ text: '150cm以上', identity: 1, status: false, title: '身高' },
						{ text: '160cm以上', identity: 2, status: false, title: '身高' },
						{ text: '170cm以上', identity: 3, status: false, title: '身高' },
						{ text: '180ccm以上', identity: 4, status: false, title: '身高' },
						{ text: '190ccm以上', identity: 4, status: false, title: '身高' },
					]
				},
				{
					title: '体重',
					data: [
						{ text: '不限', identity: 0, status: false, title: '体重' },
						{ text: '30-40kg', identity: 1, status: false, title: '体重' },
						{ text: '40-50kg', identity: 2, status: false, title: '体重' },
						{ text: '50-60kg', identity: 3, status: false, title: '体重' },
						{ text: '60-70kg', identity: 4, status: false, title: '体重' },
						{ text: '70-80kg', identity: 5, status: false, title: '体重' },
						{ text: '80-90kg', identity: 6, status: false, title: '体重' },
						{ text: '90-100kg', identity: 7, status: false, title: '体重' },
						{ text: '100kg以上', identity: 8, status: false, title: '体重' },
					]
				},
				{
					title: '月薪',
					data: [
						{ text: '不限', identity: 0, status: false, title: '月薪' },
						{ text: '3000以上', identity: 1, status: false, title: '月薪' },
						{ text: '5000以上', identity: 2, status: false, title: '月薪' },
						{ text: '8000以上', identity: 3, status: false, title: '月薪' },
						{ text: '1万以上', identity: 4, status: false, title: '月薪' },
						{ text: '2万以上', identity: 5, status: false, title: '月薪' },
						{ text: '3万以上', identity: 6, status: false, title: '月薪' }
					]
				},
			]
		}

	},
	async onShow() {
		// 先检查登录状态
		const isLoggedIn = this.checkGuide();
		if (!isLoggedIn) {
			return; // 如果未登录，直接返回不再执行后续代码
		}

		await this.getStorage(); // 如果 getStorage 是异步的也需要 await

		try {
			// 等待性别检查完成
			await this.checkSex();

			// 确保 checkSex 完成后再调用 tuijian
			this.tuijian();
		} catch (error) {
			console.error('检查性别失败:', error);
		}

		this.originalProducts = this.products; // 保存原始数据
	},
	onLoad() {
		this.getSwipers()
		this.getproducts(0)

		var that = this;
		//#ifdef H5
		// 判断是否是微信内
		let en = window.navigator.userAgent.toLowerCase();
		// 匹配en中是否含有MicroMessenger字符串
		if (en.match(/MicroMessenger/i) == 'micromessenger') {
			this.wxshare();
		}
		//#endif

	},
	methods: {
		//获取个人数据
		checkGuide() {
			const launchFlag = uni.getStorageSync('my_info');

			if (!launchFlag.id || 0 === launchFlag.id.length) {
				setTimeout(() => {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
				}, 1000)

				uni.showToast({
					title: '请先登录',
					duration: 2000,
					icon: 'none'
				});
				return false; // 返回false表示未登录
			}

			return true; // 返回true表示已登录
		},
		async getStorage() {
			var launch = uni.getStorageSync('my_info');
			this.id = launch.id;
		},
		async checkSex() {
			const res = await this.$myRuquest({
				url: '/index/dsnv.activities/checkSex',
				data: {
					"id": this.id,
				},
			})

			if (res.data.code == 200 && (res.data.sex == '男' || res.data.sex == '女')) {
				this.sex = res.data.sex;
				console.log(this.sex)
			} else {


				setTimeout(() => {
					// 跳转到性别选择页面
					uni.navigateTo({
						url: '/pages/index/check_sex'
					});
				}, 1000)

				uni.showToast({
					title: '请先选择性别',
					duration: 2000,
					icon: 'none'
				})
				return false;
			}
		},
		// 获取轮播图的数据
		async getSwipers() {
			const res = await this.$myRuquest({
				url: '/index/dsnv.index/banner'
			})
			this.swipers = res.data.data
		},
		onKeyInput: function (event) {
			this.inputValue = event.target.value
		},
		tuijian() {
			this.nv_hsl = "";
			this.nan_hsl = "";
			this.sai_hsl = "";
			this.tj_nsl = "#F14399";

			this.seen = false;

			this.sai_size = "";
			this.tj_size = "bold";
			this.nan_size = "";
			this.nv_size = "";
			if (this.sex == "男") {
				this.getproducts("女")
			} else if (this.sex == "女") {
				this.getproducts("男")
			} else {
				this.getproducts(0)

			}
		},
		nanshi() {
			this.nv_hsl = "";
			this.nan_hsl = "#F14399";
			this.sai_hsl = "";
			this.tj_nsl = "";
			this.seen = false;

			this.sai_size = "";
			this.tj_size = "";
			this.nan_size = "bold";
			this.nv_size = "";

			this.getproducts(1)

		},
		nvshi() {

			this.nv_hsl = "#F14399";

			this.nan_hsl = "";
			this.sai_hsl = "";
			this.tj_nsl = "";
			this.seen = false;

			this.sai_size = "";
			this.tj_size = "";
			this.nan_size = "";
			this.nv_size = "bold";
			this.getproducts(2)
		},
		saixuan() {

			var launchFlag = uni.getStorageSync('my_ziliao');

			this.nv_hsl = "";
			this.nan_hsl = "";
			this.sai_hsl = "#F14399";
			this.tj_nsl = "";
			this.seen = true;

			this.sai_size = "bold";
			this.tj_size = "";
			this.nan_size = "";
			this.nv_size = "";


		},

		//筛选
		// show(e) {
		//console.log(e)
		// },

		//搜索
		so() {
			this.get_so(this.inputValue);
		},

		//获取用户信息
		async getproducts(type) {
			try {
				const resw = await this.$myRuquest({
					url: '/index/dsnv.index/product?sex=' + type,
				});

				// 确保数据是数组
				this.products = Array.isArray(resw.data.data) ? resw.data.data : Object.values(resw.data.data);
				// console.log(resw.data.data)
				this.originalProducts = [...this.products]; // 安全地复制数组
			} catch (error) {
				console.error('获取产品列表失败:', error);
				this.products = [];
				this.originalProducts = [];
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				});
			}
		},


		// 修改筛选方法
		onFilterChange(e) {
			console.log('筛选条件变化:', e); // 添加这行
			console.log('筛选条件变化:title', e[0].title); // 添加这行
			console.log(this.list); // 添加这行
			// 更新选中状态
			this.list.forEach(category => {
				category.data.forEach(item => {
					e.forEach(ee => {
						if (item.identity === ee.identity && item.title === ee.title) {
							console.log(item.identity + '===' + ee.identity + '===' + item.title + '===' + ee.title + '===' + item.status)
							// 更新筛选参数
							switch (ee.title) {
								case '年龄':
									this.filterParams.age = item.status ? ee.identity : 0;
									break;
								case '身高':
									this.filterParams.height = item.status ? ee.identity : 0;
									break;
								case '体重':
									this.filterParams.weight = item.status ? ee.identity : 0;
									break;
								case '月薪':
									this.filterParams.income = item.status ? ee.identity : 0;
									break;
							}
							item.status = !item.status;
						} else if (category.title === ee.title) {
							item.status = false;
						}
					});
				});
			});
			// 在 onFilterChange 方法中添加
			console.log('更新后的 filterParams:', this.filterParams);
			// 立即应用筛选
			this.applyFilters();
		},

		// 应用筛选条件
		async applyFilters() {
			try {
				this.seen = false;

				// 如果没有选择任何筛选条件，显示全部
				if (Object.values(this.filterParams).every(val => val === 0)) {
					this.products = this.originalProducts;
					return;
				}

				// 根据筛选条件过滤数据
				const filtered = this.originalProducts.filter(item => {
					// 年龄筛选
					if (this.filterParams.age > 0) {
						const age = item.age || 0;
						if (!this.checkAge(age, this.filterParams.age)) return false;
					}

					// 身高筛选
					if (this.filterParams.height > 0) {
						const height = item.height || '';
						if (!this.checkHeight(height, this.filterParams.height)) return false;
					}

					// 体重筛选
					if (this.filterParams.weight > 0) {
						const weight = item.weight || '';
						if (!this.checkWeight(weight, this.filterParams.weight)) return false;
					}

					// 收入筛选
					if (this.filterParams.income > 0) {
						const income = item.monthly_income || '';
						if (!this.checkIncome(income, this.filterParams.income)) return false;
					}

					return true;
				});

				this.products = filtered;

			} catch (error) {
				console.error('筛选出错:', error);
				uni.showToast({
					title: '筛选失败',
					icon: 'none'
				});
			}
		},
		//获取搜索信息
		async get_so(so) {
			const resw = await this.$myRuquest({
				url: '/index/dsnv.index/product?love_code=' + so,
			})
			this.products = resw.data.data
		},

		//跳转到商品详情页.
		gotourl(id) {
			uni.navigateTo({
				url: "/pagesA/details/details?id=" + id
			})
		},

		//微信签名
		async wxshare(item) {

			const launchFlag = uni.getStorageSync('my_ziliao');
			var bal_url = "https://ds.kzjpht.com/h5/index.html#/?id=" + launchFlag.id
			const res = await this.$myRuquest({
				url: '/index/api/test',
				data: {
					qm_url: bal_url,
				},
			})

			const res2 = await this.$wx_share({
				appId: res.data.data.appId,
				timestamp: res.data.data.timestamp,
				nonceStr: res.data.data.nonceStr,
				signature: res.data.data.signature,
				title: 'singer相亲交友首页',
				desc: '专业、靠谱、真实的相亲交友平台，全部都要实名认证',
				link: bal_url,
				imgUrl: 'https://thirdwx.qlogo.cn/mmopen/vi_32/uRSd4P8a94N4mEQYibJd46SmQia5vfliaCCxjCGscsnjNKhLucic2ZofpibsSNjQJahtk8O6btQicZAs8zbqFQcGJia6Q/132'
			})

		},

		//注册会员
		async register() {

			const res = await this.$myRuquest({
				url: '/index/api/register',
				data: {
					qm_url: bal_url,
				},
			})
		},

		resetFilters() {
			// 重置筛选条件
			this.list.forEach(category => {
				category.data.forEach(item => {
					item.status = false;
				});
			});

			this.filterParams = {
				age: 0,
				height: 0,
				weight: 0,
				income: 0
			};

			this.products = this.originalProducts;
			this.seen = false;
		},

		// 检查年龄是否符合筛选条件
		checkAge(age, condition) {
			if (!age) return false;

			switch (condition) {
				case 1: return age >= 20 && age <= 25;
				case 2: return age >= 26 && age <= 32;
				case 3: return age >= 33 && age <= 39;
				case 4: return age >= 39 && age <= 45;
				case 5: return age >= 46 && age <= 55;
				case 6: return age >= 56 && age <= 65;
				case 7: return age >= 66;
				default: return true;
			}
		},

		// 检查身高是否符合筛选条件
		checkHeight(height, condition) {
			if (!height || height === '请选择') return false;

			// 提取身高数字
			const heightNum = parseInt(height);
			if (isNaN(heightNum)) return false;

			switch (condition) {
				case 1: return heightNum >= 150;
				case 2: return heightNum >= 160;
				case 3: return heightNum >= 170;
				case 4: return heightNum >= 180;
				case 5: return heightNum >= 190;
				default: return true;
			}
		},

		// 检查体重是否符合筛选条件
		checkWeight(weight, condition) {
			if (!weight || weight === '请选择') return false;

			// 提取体重数字
			const weightNum = parseInt(weight);
			if (isNaN(weightNum)) return false;

			switch (condition) {
				case 1: return weightNum >= 30 && weightNum <= 40;
				case 2: return weightNum >= 40 && weightNum <= 50;
				case 3: return weightNum >= 50 && weightNum <= 60;
				case 4: return weightNum >= 60 && weightNum <= 70;
				case 5: return weightNum >= 70 && weightNum <= 80;
				case 6: return weightNum >= 80 && weightNum <= 90;
				case 7: return weightNum >= 90 && weightNum <= 100;
				case 8: return weightNum >= 100;
				default: return true;
			}
		},

		// 检查收入是否符合筛选条件
		checkIncome(income, condition) {
			if (!income || income === '请选择') return false;

			switch (condition) {
				case 1: return income === '3000-5000' || income === '3000以上';
				case 2: return income === '5000-8000' || income === '5000以上';
				case 3: return income === '8000以上' || income === '1万-2万';
				case 4: return income === '1万-2万' || income === '1万以上';
				case 5: return income === '2-3万' || income === '2万以上';
				case 6: return income === '3万|以上' || income === '3万以上';
				default: return true;
			}
		},

	}
}
</script>

<style lang="scss">
.home {
	background-color: #f6f6f6;

	swiper {
		width: 750rpx;
		height: 380rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.sex {
		margin: 5px;
		display: flex;

		.sex_l {
			width: 33%;
			padding: 8px;
		}
	}

	.tan-main-wrap {
		display: flex;
		flex-wrap: wrap;
		/* 允许换行 */
		gap: 10px;
		/* 增加列间距 */
		justify-content: space-between;
		/* 两列等距对齐 */
		padding: 10px;
		/* 增加内边距 */
	}

	.tan-list-box {
		width: calc(50% - 10px);
		/* 每列占50%，减去间距 */
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
		-ms-box-shadow: 0px 3px 5px #dddddd;
		-moz-box-shadow: 0px 3px 5px #dddddd;
		-webkit-box-shadow: 0px 3px 5px #dddddd;
		box-shadow: 0px 3px 5px #dddddd;
	}

	.tan-img-pic {
		width: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.tan-list-guanyu {
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #ff4a6a;
	}

	.tan-list-title {
		margin: 10px;
		font-size: 14px;
		color: #a1a1a1;
	}

	.search-container {
		display: flex;
		margin: 10px;
	}

	.search-container input {
		flex: 1;
		border-radius: 10px;
		border: 1px solid lightgray;
		height: 30px;
		padding-left: 5px;
	}
}
</style>
